<template>
  <div>
    <a class="jiathis_button_weixin">微信</a>
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <video width="100%" controls>
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
      您的浏览器不支持 video 标签。
    </video>
    <div class="handle">
      <van-grid :column-num="3">
        <van-grid-item
          :icon="collectionFlag ? 'star' : 'star-o'"
          :text="collectionFlag ? '已收藏' : '收藏'"
          @click="Collection"
        />
        <van-grid-item
          icon="balance-o"
          text="打赏"
          @click="showReward = !showReward"
        />
        <van-grid-item icon="share-o" text="转发" @click="share" />
      </van-grid>
    </div>
    <div class="handle">
      <div class="handleTitle">全部评论38条</div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item">
          <div class="reviewBox">
            <img src="@/assets/img/01.jpg" alt="" />
            <div class="reviewBoxRight">
              <div class="userName">老嫖客</div>
              <div>2022-1-22</div>
              <div>
                好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好看
              </div>
              <div class="reviewBoxIcon">
                <van-icon name="good-job-o" /><van-icon
                  name="more-o"
                /><van-icon name="star-o" /><van-icon name="share-o" />
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="selectClick"
    />
    <van-action-sheet v-model="showReward" title="打赏金额" cancel-text="取消">
      <div class="content">
        <van-grid :column-num="3">
          <van-grid-item
            v-for="value in 6"
            :key="value"
            icon="balance-o"
            :text="value+'00'"
          />
        </van-grid>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { Notify } from "vant";
export default {
  name: "videoInfo",
  data() {
    return {
      showReward:false,
      title: "",
      showShare: false,
      list: [],
      collectionFlag: false,
      loading: false,
      finished: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  created() {
    this.title = this.$route.query.name;
  },
  methods: {
    reWard() {},
    Collection() {
      this.collectionFlag = !this.collectionFlag;
    },
    selectClick(options, index) {
      console.log(options, index);
      switch (options.name) {
        case "微信":
          break;
        case "朋友圈":
          break;
        case "微博":
          break;
        case "QQ":
          break;
        case "复制链接":
          this.$copyText(window.location.href)
            .then(() => {
              Notify({ type: "success", message: "网址复制成功" });
            })
            .catch(() => {
              Notify({ type: "danger", message: "复制失败" });
            });
          break;
        case "分享海报":
          break;
        case "二维码":
          break;
        case "小程序码":
          break;
      }
    },
    onClose() {
      this.showShare = false;
    },
    share() {
      this.showShare = true;
      console.log(this.showShare);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 38) {
          this.finished = true;
        }
      }, 1000);
    }
  },
};
</script>

<style lang="scss" scoped>
.handle {
  width: 96%;
  overflow: hidden;
  border-radius: 30px;
  margin: 10px auto;
  background-color: white;
  .van-grid-item {
    height: 55px;
  }
}
.handleTitle {
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid #f3f3f3;
  font-size: 16px;
}
.reviewBox {
  display: flex;
  justify-content: space-between;
  .reviewBoxRight {
    width: 280px;
    .userName {
      font-size: 20px;
    }
    .reviewBoxIcon {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding-right: 30px;
      margin-top: 10px;
      font-size: 20px;
    }
  }
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>